<template>
	<view class="page">
		<view class="form">
			<view class="form-item">
				<view class="label">
					地区
				</view>
				<view class="value">
					河北省-邯郸市-邯山区
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					品牌
				</view>
				<view class="value">
					马可波罗
				</view>
			</view>
		</view>
		<view class="form-title">
			同品类竞争信息
		</view>
		<view class="form-table">
			<view class="form-tabel-container">
				<view class="form-table-header">
					<view class="form-table-col" style="flex: 0 0 116rpx;">
						排名
					</view>
					<view class="form-table-col" style="flex: 1">
						竞品名称
					</view>
					<view class="form-table-col" style="flex: 0 0 247rpx;">
						预计年度营业额（万元）
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 116rpx;">
						1
					</view>
					<view class="form-table-col" style="flex: 1">
						<input placeholder="请输入"/>
					</view>
					<view class="form-table-col" style="flex: 0 0 247rpx;">
						10000
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 116rpx;">
						2
					</view>
					<view class="form-table-col" style="flex: 1">
						<input placeholder="请输入"/>
					</view>
					<view class="form-table-col" style="flex: 0 0 247rpx;">
						10000
					</view>
				</view>
			</view>
		</view>
		<view class="form-title">
			其他品类品牌竞争信息
		</view>
		<view class="form-table">
			<view class="form-tabel-container">
				<view class="form-table-header">
					<view class="form-table-col" style="flex: 0 0 116rpx;">
						排名
					</view>
					<view class="form-table-col" style="flex: 1">
						竞品名称
					</view>
					<view class="form-table-col" style="flex: 0 0 247rpx;">
						预计年度营业额（万元）
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 116rpx;">
						1
					</view>
					<view class="form-table-col" style="flex: 1">
						<input placeholder="请输入"/>
					</view>
					<view class="form-table-col" style="flex: 0 0 247rpx;">
						10000
					</view>
				</view>
				<view class="form-table-row">
					<view class="form-table-col" style="flex: 0 0 116rpx;">
						2
					</view>
					<view class="form-table-col" style="flex: 1">
						<input placeholder="请输入"/>
					</view>
					<view class="form-table-col" style="flex: 0 0 247rpx;">
						10000
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			提交
		</view>
		
		
	</view>
</template>

<script>
</script>

<style>
	uni-page-body{
		min-height: 100%;
		background: #F5F5F5;
	}
	.page{
		padding-bottom: 120rpx;
	}
	.form-title{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		display: flex;
		align-items: center;
		padding: 38rpx 30rpx;
	}
	.form-title::before{
		content: "";
		display: inline-block;
		width: 8rpx;
		height: 24rpx;
		background: #3481F5;
		margin-right: 9rpx;
	}
	.form-title .form-title-btn-bar{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
	}
	.form-title .form-title-btn{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #307DCD;
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	.form-title .form-title-btn:last-child{
		margin-right: 0;
	}
	.form-title .form-title-btn .u-icon{
		margin-right: 10rpx;
	}
	.form{}
	.form-item{
		border-bottom: 1px solid #F5F5F5;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	.form-item .label{
		line-height: 100rpx;
		flex: 0 0 auto;
	}
	.form-item .value{
		flex: 1;
	}
	.form-item .value input{
		height: 100rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		text-align: right;
	}
	.area-picker{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.area-picker-item{
		padding: 0 24rpx;
		line-height: 50rpx;
		background: #F5F5F5;
		border-radius: 25rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.area-picker-item:last-child{
		margin-right: 0;
	}
	.area-picker-item .u-icon{
		margin-left: 22rpx
	}
	.form-table{
		background: #FFFFFF;
		padding: 14rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.form-tabel-container{
		overflow: auto;
		border-left: 1px solid #EDEFF2;
		border-right: 1px solid #EDEFF2;
	}
	.form-table-header{
		display: flex;
		align-items: center;
		
	}
	.form-table-header .form-table-col{
		background: #EDEFF2;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		color: #666666;
		text-align: center;
		min-height: 72rpx;
		line-height: 30rpx;
		flex: 1;
		border-right: 1px solid #EDEFF2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-table-header .form-table-col:last-child{
		border-right: none
	}
	.form-table-row{
		display: flex;
	}
	
	.form-table-row .form-table-col{
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		min-height: 97rpx;
		line-height: 30rpx;
		text-align: center;
		flex: 1;
		border-right: 1px solid #EDEFF2;
		border-bottom: 1px solid #EDEFF2;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}
	.form-table-row .form-table-col:last-child{
		border-right: none
	}
	.form-table-row .form-table-col input{
		width: 100%;
		height: 97rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		text-align: center;
	}
	.form-btn-bar{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.form-btn{
		margin-right: 15rpx;
	}
	.form-btn:last-child{
		margin-right: 0;
	}
	.form-btn image{
		vertical-align: top;
		width: 55rpx;
		height: auto;
	}
	
	.footer-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		line-height: 100rpx;
		background: #307DCD;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
</style>